<template>
	<view class="container">
		<bnn-loading :loading="state === 0"/>
		<u-form v-show="state === 1" :error-type="errorType" class="form" :model="form" ref="uForm">
			<u-form-item class="form-item" label-width="136" label="期货公司" prop="companyName" required>
				<u-input v-model="form.companyName" :disabled="type === 2" @click="showCompanySelect = true" type="select" disabled placeholder="请选择期货公司"></u-input>
				<u-select v-model="showCompanySelect" v-show="type !== 2" title="选择期货公司" mode="single-column" @confirm="companySelectCallback" :list="companyList"></u-select>
			</u-form-item>
			<u-form-item class="form-item" label-width="136" label="期货账户" prop="account" required>
				<u-input v-model="form.account" :disabled="type === 2" placeholder="请输入期货账户" />
			</u-form-item>
			<u-form-item class="form-item" label-width="136" label="账户密码" prop="password" required>
				<u-input v-model="form.password" type="password" placeholder="请输入账户密码" />
			</u-form-item>
			<view class="form-btns">
				<view class="form-tips">使用过程中请勿修改期货账户密码</view>
				<button class="form-btn" @click="submit()">提交</button>
			</view>
		</u-form>
	</view>
</template>

<script>
	import BnnLoading from '@/components/bnn-ui/loading/index.vue'
	import {
		getStrategyCompanyList,
		getAccountDetail,
		changeAccount
	} from '@/api/member.js'
	export default {
		components: { BnnLoading },
		data() {
			return {
				type: 1, // 1.修改绑定 2.修改密码
				state: 0, //0.初始化 1.表单渲染
				rules: {
					broker_id: [{
						required: true,
						message: '请选择期货公司'
					}],
					account: [{
						required: true,
						message: '请输入期货账户'
					}],
					password: [{
						required: true,
						message: '请输入账户密码'
					}]
				},
				errorType: ['toast'],
				companyList: [],
				showCompanySelect: false,
				form: {}
			}
		},
		onLoad(option) {
			if (option.type == 2) {
				this.type = 2
				this.getAccountData()
			} else {
				this.init()
			}
		},
		onReady() {
			// 初始化载入表单验证规则
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 初始化页面
			init: function() {
				this.getCompanyList()
			},
			// 查询账户资料
			getAccountData: function() {
				// 请求账户信息
				getAccountDetail().then(res => {
					if (res.code === 200) {
						let data = res.data
						this.form = {
							account: data.account,
							companyName: data.broker_name,
							broker_id: data.broker_id
						}
						this.state = 1
					}
				})
			},
			// 查询期货公司列表
			getCompanyList: function() {
				getStrategyCompanyList().then(res => {
					if(res.code === 200) {
						this.companyList = res.data.map(item => {
							return {
								label: item.name,
								value: item.id
							}
						})
					}
					this.state = 1
				}).catch((err) => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			},
			// 选择期货公司
			companySelectCallback: function(data) {
				this.form.companyName = data[0].label
				this.form.broker_id = Number(data[0].value)
			},
			//表单提交
			submit: function() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let data = {}
						let formData = this.form
						Object.keys(formData).map((key)=> {
							data[key] = formData[key]
						})
						delete data.companyName
						changeAccount(data).then(res=> {
							let msg = res.message
							if (res.code === 200) {
								msg = `${this.type === 2 ? '修改' : '绑定'}成功`
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							}
							uni.showToast({
								title: msg,
								icon: 'none'
							})
						}).catch((err) => {
							uni.showToast({
								title: err.message,
								icon: 'none'
							})
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		padding: 8px 12px;
		.f-cc {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.u-form-item {
			padding: 0;
		}
		.form-item {
			padding: 8px 12px;
			background-color: #ffffff;
			margin-bottom: 6px;
			border-radius: 4px;
		}
		.form-btns {
			margin-top: 16px;
			display: flex;
			align-items: center;
			flex-direction: column;
			.form-tips {
				color: #C0C0C0;
				font-size: 12px;
				font-weight: 600;
				margin-bottom: 4px;
			}
			.form-btn {
				width: 100%;
				height: 32px;
				line-height: 32px;
				font-size: 14px;
				background-color: #1296DB;
				color: #ffffff;
				border: 0;
				margin-bottom: 6px;
				&[disabled] {
					background-color: #cccccc;
				}
			}
		}
	}
</style>
